<template>
    <section id="detail">
        <div class="nav">
            <span class="left" @click="back()"></span>
            <router-link to="/search" v-bind:class="'search'">
                <p>
                    <span></span>
                    <input type="text" :placeholder="prop" />
                </p>
            </router-link>
            <router-link to="/car1">
                <span class="right"></span>
            </router-link>
        </div>
        <shopSelect :datas="detailFemale" v-if="detailFemale.name==prop"></shopSelect>
        <shopSelect :datas="boyList" v-if="boyList.name==prop"></shopSelect>
    </section>
</template>

<script>
import shopSelect from "../type/shopSelect";
export default {
    components: {
        shopSelect,
    },
    data() {
        return {
            prop: "",
            id: 0,
            detailFemale: [],
            boyList: [],
        };
    },
    mounted() {
        this.prop = this.$route.params.title;
        this.id = this.$route.params.id;
        if (this.id == 1) {
            this.$router.replace({ path: "/newCount" });
        }
        this.$http.get("./data/detail.json").then((res) => {
            this.detailFemale = res.data.detailFemale;
            this.boyList = res.data.boyList;
        });
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
    },
};
</script>

<style lang="scss">
#detail {
    .nav {
        display: flex;
        height: 30px;
        padding: 10px 15px;
        justify-content: space-between;
        a {
            text-decoration: none;
        }

        .left,
        .right {
            display: inline-block;
            width: 22px;
            height: 100%;
        }
        .left {
            background: url("../../assets/images/mine/return.png") no-repeat
                center;
            background-size: contain;
        }
        .right {
            background: url("../../assets/images/shopcar.png") no-repeat center;
            background-size: contain;
        }
        .search {
            flex: 1;
            margin: 0 15px;
            input::-webkit-input-placeholder {
                /*WebKit browsers*/
                font-size: 15px;
                color: rgb(0, 0, 0);
            }
            p {
                display: flex;
                height: 100%;
                align-items: center;
                background-color: #eeeeee;
                span {
                    width: 15px;
                    height: 100%;
                    margin: 0px 10px;
                    background: url("../../assets/images/home-server.png")
                        no-repeat center/contain;
                }
                input {
                    height: 15px;
                    border: none;
                    flex: 1;
                    outline: none;
                    background-color: #eeeeee;
                }
            }
        }
    }
}
</style>

